<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>响应式千峰官网-首页</title>
		<style>
			*{margin:0;padding:0}
			li{list-style:none;}
			body{
				font-size: 14px;
				color:#333;
				background-color:#f3f3f3;
			}
			a{
				text-decoration: none;
				color:#333;
			}
			img{vertical-align: middle;}
			header{
				background-color:#fff;
				height:97px;
				position:fixed;
				width:100%;
				z-index:2;
			}
			#logo{
				width: 209px;
				height: 54px;
			}
			.content{
				width: 90%;
				margin:0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			header .content{
				height: 97px;
			}
			header ul{
				display: flex;
				width:70%;
				justify-content: space-between;
			}
			header a{transition:all .5s;}
			header a:hover{
				color:#f99;
			}
			#menu{
				display: none;
			}
			article{
				padding-top:97px;
			}
			article .content{
				flex-wrap:wrap;
				margin-top:20px;
			}
			article li{
				width:24%;
				height:300px;
				margin-bottom: 10px;
				background-color:#fff;
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transition:all .5s;
			}
			article li:hover{
				transform:scale(1.05);
				box-shadow:0px 0px 20px #999;
			}
			article h2{margin-top: 20px;}
			article img{
				width: 92px;
				height: 110px;
			}
			/* PC端 */
			/* @media screen and (min-width:801px){
				
			} */
			
			
			/* 移动端 */
			@media screen and (max-width:800px){
				header ul{
					display: none;
				}
				#menu{
					display: block;
					cursor:pointer;
					transition:all .5s;
				}
				#menu:hover{
					opacity:.7;
				}
				article li{
					width:32%;
				}
			}
			
			@media screen and (max-width:600px){
				article li{
					width:100%;
				}
			}
			#nav{
				position:fixed;
				top:0;
				right:-100%;
				background-color:#000;
				width:100%;
				height:100%;
				z-index:3;
			}
			#nav li{
				line-height:52px;
				color:#fff;
				text-align:center;
				font-size: 18px;
				cursor:pointer;
			}
			#nav li:hover{
				background-color:#FF9999;
				color:#fff;
			}
		</style>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/slider.js"></script>
	</head>
	<body>
		<header>
			<div class="content">
				<img src="img/logo.png" id="logo" alt="">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">走进千锋</a></li>
					<li><a href="#">走进千锋</a></li>
					<li><a href="#">走进千锋</a></li>
					<li><a href="#">走进千锋</a></li>
					<li><a href="#">走进千锋</a></li>
					<li><a href="#">走进千锋</a></li>
				</ul>
				<img id="menu" src="img/menu.png" alt="">
			</div>
		</header>
	
		<article>
			<ul class="content">
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的男生最帅</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的女生最漂亮</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的男生最帅</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的女生最漂亮</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的男生最帅</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的女生最漂亮</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的男生最帅</h2>
				</li>
				<li>
					<img src="img/h5_ico.png" alt="">
					<h2>09班的女生最漂亮</h2>
				</li>
			</ul>
		</article>
	
		<ul id="nav">
			<li>首页</li>
			<li>列表页1</li>
			<li>列表页2</li>
			<li>列表页3</li>
			<li>列表页4</li>
			<li>列表页5</li>
			<li>列表页6</li>
		</ul>
	
	</body>
</html>
